<script setup>

</script>

<template>
<div  style="width:100vw;height: 100vh;overflow: hidden;display: flex">
  <div  style="flex:1;background-color: black ">
    <el-image style="width:100%;height:100%" fit="cover" loading="lazy"
              src="../../../public/img/preview.jpg"/>
  </div>
  <div class="title">
    <div>登录界面</div>
  </div>
  <div class="right-card">
    <router-view v-slot="{Component}">
      <transition name="el-fade-in-linear"  mode="out-in">
        <component :is="Component"></component>

      </transition>
    </router-view>
  </div>
</div>

</template>

<style scoped>
.title{
  position: absolute;
  bottom:30px;
  left:30px;
  color:white;
  text-shadow: 0 0 10px black;
}
.right-card{
  width: 400px;
  z-index: 1;
  background-color: var(--el-bg-color);
}
</style>